<template>
  <div class="index-container">
    展示locales配置的内容：
    <br>

    <!-- 方式一、直接页面内使用 : 更改locale.value时 可直接自动切换对应语言 -->
    方式一：{{ t("hello") }}
    <br/>
    方式一：{{ $t("hello") }}
    <br/>


    <!-- 切换语言模式按钮  (方式一、直接页面内使用 好处：更改locale.value时 可直接自动切换对应语言)-->
    <button @click="changeLanguage">
      {{ $i18n.locale }}
    </button>
  </div>
</template>
<script setup>
import {reactive, computed, getCurrentInstance} from "vue";
import i18nHook from './i18nHook.js'

let {t} = i18nHook();
const {proxy: $vm} = getCurrentInstance()

/**
 * 切换语言
 */
const changeLanguage = () => {
  console.log("111", $vm.$i18n)
  $vm.$i18n.locale = $vm.$i18n.locale === "zh" ? "en" : "zh"; // 切换中英文
};
</script>

